import React from 'react'
import Calendar from '../../component/Calendar/Calendar'
import './css/Fh_zbgl.css'

export default class Fh_zbgl extends React.Component {
    constructor(props) {
        super(props);   
        // this.format = 'YYYY/MM/DD'; 
        let date = new Date(); 
        let end_time = new Date(new Date(date.getFullYear(), date.getMonth() + 1, 1).getTime() - 86400);
        let end = `${end_time.getFullYear()}/${end_time.getMonth() + 1}/${end_time.getDate()}`; 
        let start_time = new Date(new Date(date.setDate(1)).getTime());
        let start = `${start_time.getFullYear()}/${start_time.getMonth() + 1}/${start_time.getDate()}`; 
        this.state = {
            select: [],
            start,
            end,
            position: '',
        }
    }

    info ={
        boxW:1350,
        // boxW:window.screen.width,
        tempData:[],
        firstW:160,
        lastW:200,
        itemW:100,
        showNums:5,
        month:12,
        strTitle:'', 
        curIndex:0,
      }
      

    componentDidMount = () => { 
          for(let i=1;i <= this.info.month;i++){
            this.info.strTitle = this.info.strTitle+'<div  style="width:'+ this.info.itemW+'px ">'+i+'月</div>';
          }
          T.ajax({
            key:"tabledata",
            f:"json",
            success:(result) => {
              this.info.tabledata = result.data;
             this.prodata(result.data)
                    
            }
          })
            T.ajax({
            key: 'calendar_demo',
            f: 'json',
            success: select => {
                this.setState({select});
            }
        });
    } 
    // 月份移动点击事件
   moveFn =(type) => { 
      this.info.curIndex = type=='add'? this.info.curIndex -1 : this.info.curIndex +1;  
      this.refs.list.style.left = this.info.curIndex * this.info.itemW+'px'
    } 
    // 日历点击事件
    onChange = item => {
        let {select} = this.state;
        let {dateStr, changeable,disabled} = item;
        console.log(item)  
        let count = 0,sameIndex=0;
        for(let jtem of select){
            if(jtem.date != dateStr){
                count++;
            }else{
                sameIndex = count
            }
        }
        if(changeable){
            select.pop();
        }else{
            if(count==select.length){
                select.push(Object.assign(item, {date: dateStr, style: {background: '#4D97E0', color: '#FFF'},changeable: false}));
            }else{ 
            if(!disabled)  select.splice(sameIndex,1)

            }
        } 
        this.setState({select, position: ''});
    } 
    prodata = (tempData) =>{
            let strTable='<div class="contentWrap">',index=1;
            let strMember='';
            let info = this.info
                tempData.map(function(ktem,k){ 
                strTable = strTable +'<div class="item"> '; 
                if(ktem.monthData.length>0){  
                    ktem.monthData.map(function(jtem,j){ 
                        let cur = jtem.tm.substring(5,7);
                          if(index<cur) {
                                for(index;index <= cur;index++){
                                  strTable = index == cur ? strTable +'<div style="width:'+ info.itemW+'px "><p>'+jtem.data.toString(',')+'</p></div>' : strTable +'<div  style="width:'+ info.itemW+'px "><p></p> </div>';
                                }  
                            }
                          if(j==ktem.monthData.length-1){//当最后一个值还不是最后一天的时候
                                for(index;index <= info.month;index++){
                                    strTable = strTable +'<div  style="width:'+ info.itemW+'px "><p></p></div>'; 
                                } 
                            } 
                    }) 
                }else{//无数据
                    for(index;index <= info.month;index++){
                          strTable = strTable +'<div  style="width:'+ info.itemW+'px "><p></p></div>';
                    } 
                }
                strTable = strTable +'</div> '; 
                index = 1 ;

                if(ktem.memberData.length>0){
                  let tempmemb='<div><p> ';
                    ktem.memberData.map(function(htem,h){
                      tempmemb = tempmemb +htem['name']+'、';
                    })
                    strMember = strMember +tempmemb+'</p></div>';
                }
            })
            strTable = strTable +'</div> ';  
            this.refs.listtable.innerHTML= strTable; 
            this.refs.memberName.innerHTML= strMember;  
            this.refs.monthTitle.innerHTML= info.strTitle;    
      } 

    render() { 
        const {select, start, end, position} = this.state;

        return (
            <div className='Fh_zbgl'> 
                 <div className="pbgl"> 
                  <div className="head">
                    <div className='groupName'  style = {{width: this.info.firstW+'px'}}> 
                      <div className="title">   组别
                      </div>
                      <div className="wrap">   </div>
                    </div>
                    <i className="left"  onClick={() =>this.moveFn('reduce')} style = {{left:this.info.firstW-30+"px"}}></i>
                    <div  className="monthWrap" >
                      <div  ref="list" className="monthList" style = {{left:0,width : (this.info.boxW - this.info.lastW - this.info.firstW)/this.info.showNums*12  }}>
                        <div className="title" ref = 'monthTitle'>  </div>
                        <div className="table" ref="listtable"> </div>
                      </div>  
                    </div>
                    <i className="right"  onClick={() => this.moveFn('add')}  style = {{right: this.info.lastW+30+'px'}}></i>
                    <div className='memberName'   style = {{width: this.info.lastW+'px'}}  > 
                        <div className="title"> 组员  </div>
                        <div className="wrap"  ref="memberName"> </div>
                    </div>
                  </div>
                </div>
                <div style={{width: '300px'}}>
                  <Calendar onChange={this.onChange} start={start} end={end} select={select} position={position}  />
                  
                </div>

            </div>
        )
    }
}